<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #menu {
            padding: 1em;
            text-align: center;
        }

        button {
            display: block;
            margin: 0 auto;
            margin-top: 1em;
        }
    </style>
    <link href="https://js.arcgis.com/4.21/esri/themes/light/main.css" rel="stylesheet"/>
    <script src="https://js.arcgis.com/4.21/"></script>
    <script>
        require(["esri/WebScene",
                "esri/views/SceneView",
                "esri/config"],
            (WebScene, SceneView,esriConfig) => {
                const map = new WebScene({
                    portalItem: {
                        id: "0359bb9202614d7ca2bd0acc278422d6"
                    }
                });

                const view = new SceneView({
                    container: "viewDiv",
                    map: map
                });

                view.when(()=>{
                    /**
                     * 指定用户相对于地表的导航约束
                     * type=none表示用户可以在地表上方和下方导航
                     * type=stay-above 用户只能在地表导航
                     */
                    map.ground.navigationConstraint.type="none";
                    //设置地表的颜色
                    map.ground.surfaceColor="white";
                    //设置地表透明度
                    map.ground.opacity=0.7;
                });

                view.ui.add("menu", "top-right");

                //设置是否能看穿地下
                document
                    .getElementById("opacityInput")
                    .addEventListener("change", function (event) {
                        map.ground.opacity = event.target.checked ?0.7 : 1;
                    });


                //设置转移视角
                document
                    .getElementById("undergroundBtn")
                    .addEventListener("click", function () {
                        //获取第二行数据
                        view.goTo(map.presentation.slides.getItemAt(1).viewpoint,{
                            duration:6000
                        })
                    });
            });
    </script>
</head>
<body>
<div id="viewDiv"></div>
<div id="menu" class="esri-widget">
    <input type="checkbox" id="opacityInput" checked />
    <label for="opacityInput">看穿地面</label>
    <button id="undergroundBtn">地下视角</button>
</div>
</body>
</html>
